<template>
  <div class="">
    <div class="heads">
      <el-menu :default-active="activeIndex" default-activ class="el-menu-demo" mode="horizontal" @select="handleSelect" router="true">
        <div class="headsbox">
             <el-menu-item  index="/">首页</el-menu-item>
              <el-menu-item index="">关于我们</el-menu-item>
              <el-menu-item index="/goods" >产品与方案</el-menu-item>
              <el-menu-item index="/newss" >新闻资讯</el-menu-item>
              <el-menu-item index="/aboutUs" >加入我们</el-menu-item>
        </div>
 
</el-menu>
  </div>
  </div>
 
</template>
<style>
.headsbox{
  width: 100%;
  /* height: 100px; */
  background-color: #fff;
}
.headsbox{
  width:800px ;
  margin:0 auto;
  display: flex;
  justify-content: space-evenly;
}
@media screen and (max-width: 750px) {
  .headsbox{
   
    overflow: hidden;
  }
  .el-menu-demo{
    overflow-x: scroll;
  }
}
</style>
<script>

export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };

  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }

  }
}
</script>

<style></style>